<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>三米粥铺</title>
    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link rel="stylesheet" href="css/zTreeStyle.css">
</head>
 <style>
  @font-face {
      font-family: "iconfont";
      src: url('fonts/iconfont.eot'); /* IE9*/
      src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('fonts/iconfont.woff') format('woff'), /* chrome, firefox */
      url('fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
      url('fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
    }
  .iconfont {
      font-family:"iconfont" !important;
      font-size:16px;
      font-style:normal;
      -webkit-font-smoothing: antialiased;
      -webkit-text-stroke-width: 0.2px;
      -moz-osx-font-smoothing: grayscale;
    }
   
    html,body{height:100%;}
    *{margin:0;padding:0;}
    li{list-style:none;}
	a{text-decoration:none!important;cursor:pointer;}
    .show{display:block!important;}
	.panel-show{top:40px!important;}
	
	
	.wrapper{padding:40px 0;}
	.shadow{background:rgba(0,0,0,0.5);z-index:50;height:100%;width:100%;position:absolute;display:none;}
    .model-box{width:1280px;min-height:800px;border:1px solid #ddd;margin:0 auto;padding:20px 30px;}
    .model-box .model-colum{position:relative;padding-left:100px;}
    .model-box .model-name{padding:15px 0 15px 100px;}
    .model-box .model-colum label{font-size:18px;height:30px;line-height:30px;position:absolute;left:0;}
    .model-box .model-colum input{height:30px; text-indent:15px;width:250px;}
    table { width:100%; }
    table tbody tr{ border:1px solid #e7eaec; }
    table tbody tr.title td { height:30px;line-height:30px;background:#f8f8f8;text-align:center;min-width:100px; }
    table tbody tr.detail td { padding:15px; border:1px solid #e7eaec;min-width:100px;}
	table tbody tr.detail td.area-td{overflow:hidden;zoom:1;}
	table tbody tr.detail td.area-td .area{float:left;}
	table tbody tr.detail td.area-td .edit-remove{float:right;}
	table tbody tr.detail td.area-td .edit-remove .delete-btn{margin-left:20px;}
	table tbody tr.detail td.post-td{ text-align:center;}
    table tbody tr.detail td .post-fee{width:60px;}
    table tbody tr.detail td .new-btn{color:#3879D9;text-decoration:none;outline:none;border:none;}
    
	
	
    .model-box .model-content .model-right{position:relative;}
    .model-panel{position:absolute;top:-1000px;;border:1px solid #ddd;width:100%;z-index:100;background:#fff;transition:all 0.8s;}
    .model-panel .model-header h5{background:#f8f8f8;height:50px;margin:0;line-height:50px;padding:0 15px;font-size:18px;border-bottom:1px solid #ddd;}
    .model-panel .model-footer{background:#f8f8f8;height:65px;margin:0;line-height:65px;padding:0 15px;border-top:1px solid #ddd;}
    .model-panel .model-footer .footer-btn{text-align:center;}
    .model-panel .model-footer .footer-btn .btn{padding:5px 30px;border:1px solid #ddd;}
    .model-panel .model-footer .footer-btn .confirm-btn{background:#3879D9;color:#fff;}
    .model-panel .model-footer .footer-btn .cancel-btn{margin-left:10px;}
    .model-panel .model-content{padding:30px 0;}
    .model-panel .model-content .model-middle-box{margin:0 auto;width:810px;height:450px;}
    .model-panel .model-content .model-middle-box .model-middle-box_a{width:270px;height:450px;float:left;}
    .model-panel .model-content .model-middle-box .choose_area{border:1px solid #ddd;}
    .model-panel .model-content .model-middle-box .btn_area{text-align:center;height:450px;line-height:450px;}
    .model-panel .model-content .model-middle-box .choosen_area{border:1px solid #ddd;}
    .model-panel .model-content .model-middle-box .btn_area .add-btn{padding:5px 30px;border:1px solid #ddd;}
    .model-panel .model-content .model-middle-box .model-middle-box_a h5{background:#f8f8f8;height:47px;margin:0;line-height:47px;text-align:center;font-size:17px;border-bottom:1px solid #ddd;}
    .model-panel .model-content .model-middle-box #arealist{overflow:auto;height:400px;}
	.model-panel .model-content .model-middle-box #arealist li{line-height:25px;}
	.model-panel .model-content .model-middle-box #arealist li a{line-height:25px;height:25px;text-decoration:none;}
	.model-panel .model-content .model-middle-box #arealist_selected{overflow:auto;height:400px;}
	.model-panel .model-content .model-middle-box #arealist_selected li{line-height:25px;}
	.model-panel .model-content .model-middle-box #arealist_selected li a{line-height:25px;height:25px;text-decoration:none;}
	.button.remove{vertical-align:middle!important;margin-top:-5px!important;margin-left:10px!important;}
 </style>
    <body>
    <div class="shadow"></div>
    <div class="wrapper">
         <div class="model-box">
             <div class="model-name model-colum">
                 <label>模板名称</label>
                 <div class="model-right"><input type="text" value="测试模板" /></div>
             </div>
             <div class="model-content model-colum">
                 <label>配送区域</label>
                 <div class="model-right">
                     <table>
                         <tbody>
                            <tr class="title"><td>可配送区域</td><td>运费</td></tr>
                         </tbody>
                         <tbody class="model-list">
                            <tr class="detail">
                               <td class="area-td"><div class="area">北京市</div><div class="edit-remove"><a class="edit-btn">编辑</a><a class="delete-btn">删除</a></div></td>
                               <td class="post-td"><input class="post-fee" type="text" placeholder="0.00"/></td>
                            </tr>

                         </tbody>
                         <tbody>
                            <tr class="detail"><td colspan="2"><a href="javascript:;" class="new-btn">设置配送区域和运费</td></a></tr>
                         </tbody>
                     </table>
                 
                     <div class="model-panel">
                          <div class="model-header"><h5>选择可配送区域</h5></div>
                          <div class="model-content">
                              <div class="model-middle-box">
                                  <div class="model-middle-box_a choose_area">
                                      <h5>可选省、市、区</h5>
                                      <ul id="arealist" class="ztree"></ul>
                                  </div>
                                  <div class="model-middle-box_a btn_area">
                                      <a class="add-btn btn">添加</a>
                                  </div>
                                  <div class="model-middle-box_a choosen_area">
                                      <h5>已选省、市、区</h5>
                                      <ul id="arealist_selected" class="ztree"></ul>
                                  </div>
                              </div>
                          </div>
                          <div class="model-footer">
                              <div class="footer-btn">
                                 <a class="confirm-btn btn">确定</a><a class="cancel-btn btn">取消</a>      
                              </div>
                         </div>
                    </div>
                    
                 </div>
             </div>
         </div>
    </div>
    </body>
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script type="text/javascript" src="js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.exedit.js"></script>
    <script type="text/javascript" src="js/plugins/layer/layer.min.js"></script>
 
    	<script type="text/javascript">
		<!--
		var setting = {
          check: {
		      enable: true,
		      chkStyle: "checkbox",
		      chkboxType: { "Y": "ps", "N": "ps" },
	        },
			data: {
				simpleData: {
					enable: true
				},
				keep: {
			        parent: true,
					leaf:true
		        }
			},
		    view: {
				showIcon: false,
			    showLine: false, 
				},
			callback: {
				beforeExpand: beforeExpand,
			}
		};
		
		var setting_selected = {
          check: {
		      enable: true,
		      chkStyle: "checkbox",
		      chkboxType: { "Y": "ps", "N": "ps" },
	        },
			data: {
				simpleData: {
					enable: true
				},
				keep: {
			        parent: true,
					leaf:true
		        }
			},
		    view: {
				showIcon: false,
			    showLine: false, 
				},
			edit: {
				enable: true,
		        showRemoveBtn: true,
				showRenameBtn: false,
				},
			callback: {
				beforeRemove: beforeRemove,
			}
		};

        //初始化
		var zNodes =[
			{ id:1, pId:0, name:"湖北省",isParent:true},
			{ id:2, pId:0, name:"上海市",isParent:true},
		   
/*		    { id:11, pId:1, name:"武汉市"},
			{ id:111, pId:11, name:"武昌区"},
			{ id:112, pId:11, name:"汉口区"},
			{ id:12, pId:1, name:"黄冈市"},
			{ id:121, pId:12, name:"英山县"},
			{ id:122, pId:12, name:"浠水县"},
			{ id:22, pId:2, name:"上海市"},
			{ id:221, pId:22, name:"徐汇区"},
			{ id:222, pId:22, name:"浦东区"},
			{ id:221, pId:22, name:"徐汇区"},
			{ id:222, pId:22, name:"浦东区"},
			{ id:223, pId:22, name:"嘉定区"},
			{ id:224, pId:22, name:"宝山区"},
			{ id:225, pId:22, name:"徐汇区"},
			{ id:226, pId:22, name:"长宁区"},   */

		];
		
		//展开 ajax请求得到下一级
		function beforeExpand(treeId,treeNode){
		     if(treeNode.id==1){
		         newNodes=[
			         { id:11, pId:1, name:"武汉市",isParent:true},
			         { id:12, pId:2, name:"黄冈市",isParent:true},
			     ];
			 }else if(treeNode.id==2){
				 newNodes=[
				 	 { id:22, pId:2, name:"上海市",isParent:true},
				 ];
			 }else{
				 newNodes=[
				 	 { id:1000, pId:2, name:"测试"},
				 ];
				 }
			 var treeObj = $.fn.zTree.getZTreeObj("arealist");
	         treeObj.removeChildNodes(treeNode);
			 treeObj.addNodes(treeNode, newNodes);
			 treeObj.showNode(treeNode);
		}
		
		function beforeRemove(){}

		
		$(document).ready(function(){
			
			$(".new-btn").on("click",function(){
				$(".shadow").addClass("show");
				$(".model-panel").addClass("panel-show");
			})
			
			$(".shadow").on("click",function(){
				$(".shadow").removeClass("show");
				$(".model-panel").removeClass("panel-show");
			})
			
			$(".cancel-btn").on("click",function(){
				$(".shadow").removeClass("show");
				$(".model-panel").removeClass("panel-show");
			})
			
			
			$.fn.zTree.init($("#arealist"), setting, zNodes);
			
			var zNodes_selected=[];
			$(".add-btn").on("click",function(){
				    var treeObj = $.fn.zTree.getZTreeObj("arealist");
				    var selected_nodes = treeObj.getCheckedNodes(true);
					if(selected_nodes ==''){
						    alert("请选择区域");
							return;
						}else{
				          alert(JSON.stringify(selected_nodes));
				          id=selected_nodes.id;
						  pId=selected_nodes.pId;
						  name=selected_nodes.name;
						  isParent=selected_nodes.isParent=true?true:false;
				          zNodes_selected=[];
					}
					$.fn.zTree.init($("#arealist_selected"), setting_selected, zNodes_selected);
				})
		});
		//-->
	</script>
</body>


</html>